<template lang="">
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>性别统计统计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div id="myChartsex" :style="{width: '300px', height: '300px'}">

      </div>
    </el-card>

  </div>
</template>
<script>
    export default {
        data() {
            return {
                sexArr: []
            }
        },
        mounted() {

            this.getsex()

        },
        methods: {
            getsex() {

                this.$axios.get('api/sex').then(res => {

                    if (res.data.status == 200) {
                        this.sexArr = res.data.data
                        this.drawLine()
                    } else {
                        console.log('获取失败');
                    }
                })
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChartsex'))
                    // 绘制图表
                myChart.setOption({
                    title: {
                        text: '性别报表',

                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '15%',
                        left: 'center'
                    },
                    series: [{
                        name: '性别',
                        type: 'pie',
                        radius: '50%',
                        data: this.sexArr
                    }]

                });
            }
        }
    }
</script>
<style lang="">

</style>